<template>
  <div>
    <el-dialog
    title="修改"
    :visible.sync="dialogVisible"
    :before-close="handleClose">
    <el-input type="textarea" rows="10" v-model="content"></el-input>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit_content()">确 定</el-button>
  </span>
  </el-dialog>
  <el-table
    :data="questions"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="问题">
    </el-table-column>
    <el-table-column
      label="状态"
      width="180">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.status ? 'primary' : 'info'"
          disable-transitions>{{scope.row.status ? '已解决' : '未解决'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini" @click="auto_solve(scope.row.que_key)" :disabled="!scope.row.available">
          自动回答
        </el-button>
        <el-button
          size="mini"
          @click="open_edit(scope.row.que_key,scope.row.content)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="remove_ans(scope.row.que_key)">清除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'QuestionTable',
  props: {
    currentUrl: String,
  },
  data() {
    return {
      questions: [],
      dialogVisible: false,
      content: '',
      query_key: '',
    };
  },
  created() {
    this.fresh_data();
  },
  methods: {
    fresh_data() {
      const self = this;
      axios.get('/api/doc/questions', { params: { url: this.currentUrl } }).then(
        (res) => { self.questions = res.data; },
      );
    },
    remove_ans(queKey) {
      const self = this;
      axios.get('/api/doc/remove_ans', { params: { que_key: queKey } }).then(() => { self.fresh_data(); self.$emit('need_fresh'); });
    },
    open_edit(queKey, content) {
      const self = this;
      self.dialogVisible = true;
      self.content = content;
      self.query_key = queKey;
    },
    submit_content() {
      const formData = new FormData();
      const self = this;
      formData.append('query_key', this.query_key);
      formData.append('content', this.content);
      axios.post('/api/doc/upload_ans', formData).then(() => { self.fresh_data(); self.$emit('need_fresh'); });
      this.dialogVisible = false;
    },
    auto_solve(queryKey) {
      debugger;
      const self = this;
      axios.get('/api/doc/auto_solve_one', { params: { queryKey } }).then(() => {
        self.fresh_data(); self.$emit('need_fresh');
      });
    },
  },
  watch: {
    currentUrl(newUrl, oldUrl) {
      this.fresh_data();
    },

  },
};
</script>

<style scoped>

</style>
